<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>重置密码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<section class="w3l-login">
    <div class="overlay">
        <div class="wrapper">
            <div class="logo">
                <a class="brand-logo" href="/static/css/style.css">人脸情绪识别系统</a>
            </div>
            <div class="form-section">
                <h3>重置密码</h3>
                <h6>通过手机号和验证码重置密码</h6>
                {% if success %}
                <div class="success-message" style="color: green; border: 1px solid #ccffcc; padding: 15px; margin-bottom: 20px;">
                    {{ success }} <a href="/">返回登录页面</a>
                </div>
                {% endif %}
                {% if error %}
                <div class="error-message" style="color: red; margin-bottom: 15px;">{{ error }}</div>
                {% endif %}
                <form action="/reset_password" method="post" class="signin-form">
                    <div class="form-input" style="display: flex; align-items: center; gap: 8px;">
                        <input type="text" name="phone" id="phone" placeholder="手机号" style="flex:1;" required>
                        <button type="button" id="send-sms-btn" style="padding: 6px 14px; font-size: 13px; height: 38px; line-height: 1;">获取验证码</button>
                    </div>
                    <div class="form-input">
                        <input type="text" name="sms_code" placeholder="短信验证码" required>
                    </div>
                    <div class="form-input">
                        <input type="password" name="new_password" placeholder="新密码" required>
                    </div>
                    <div class="form-input">
                        <input type="password" name="confirm_new_password" placeholder="确认新密码" required>
                    </div>
                    <button type="submit" class="btn btn-primary theme-button mt-4">重置密码</button>
                </form>
                <div style="margin-top: 18px; text-align: right;">
                    <a href="/" style="color: #007bff; text-decoration: underline; font-size: 15px;">返回登录页面</a>
                </div>
            </div>
        </div>
    </div>
    <div class="copy-right">
        <p>&copy; 2025 人脸情绪识别系统. 保留所有权利</p>
    </div>
</section>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const phoneInput = document.getElementById('phone');
        const sendSmsBtn = document.getElementById('send-sms-btn');
        if (sendSmsBtn) {
            sendSmsBtn.onclick = function() {
                var phone = phoneInput.value.trim();
                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入正确的手机号');
                    return;
                }
                fetch('/send_sms_code?phone=' + encodeURIComponent(phone))
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            alert('验证码已发送');
                        } else {
                            alert('发送失败：' + data.msg);
                        }
                    });
            };
        }
    });
</script>
</body>
</html> 